<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Preview</title>
  <!-- es-module-shims -->
  <style>
    * {
      padding: 0;
      margin: 0;
    }
  </style>
</head>
<body>
<script type="importmap">
  {
    "imports": {
      "react": "https://esm.sh/react@18.2.0",
      "react-dom/client": "https://esm.sh/react-dom@18.2.0"
    }
  }
</script>
<script>

</script>
<script type="module">
  import React, {useState, useEffect} from 'react';
  import ReactDOM from 'react-dom/client';
  import {Playground} from 'https://esm.sh/react-exercise-playground@#version#'

  const App = () => {
    const [sandboxProps, setSandboxProps] = useState(null);

    useEffect(() => {
      window.addEventListener('message', ({data}) => {
        if (data?.type === 'SANDBOX_RUN') {
          data.data.onFilesChange = (val) => {
            window.parent.postMessage({type: 'SANDBOX_ON_FILES_CHANGE', message: val})
          }
          setSandboxProps(data.data)
        }
      })
    }, [])

    return sandboxProps ? React.createElement(React.StrictMode, null, React.createElement(Playground, sandboxProps)) : null
  };

  window.addEventListener('load', () => {
    window.parent.postMessage({type: 'SANDBOX_LOADED', message: ''})
    const root = document.getElementById('root')
    ReactDOM.createRoot(root).render(React.createElement(App, null))
  })
</script>
<div id="root">
  <div style="position:absolute;top: 0;left:0;width:100%;height:100%;display: flex;justify-content: center;align-items: center;">
    Loading...
  </div>
</div>
</body>
</html>
